<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-button type="primary" class="mb-4"  v-perms="['article.banner/createDynamic']" @click="onClick_add">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
                新建
            </el-button>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="80" />
                <el-table-column label="标题" min-width="180" prop="official_title"/>
                <el-table-column label="封面图" min-width="160" prop="official_pics">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px"
                                    :src="row.official_pics"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="[row.official_pics]"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="文章来源" min-width="180" prop="official_from"/>
                <el-table-column label="发布时间" min-width="180" prop="create_time"/>
                <el-table-column label="排序" min-width="120" prop="sort"/>
                <el-table-column label="资讯状态" min-width="120" prop="status">
                    <template #default="{ row }">
                        <span v-if="row.status == 1">启用</span>
                        <el-link v-else type="danger" :underline="false">禁用</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="查看用户数" min-width="120" prop="show_num"/>
                <el-table-column label="点赞数" min-width="120" prop="like_count"/>
                <el-table-column label="评论数" min-width="120" prop="comment_count"/>
                <el-table-column label="转发数" min-width="120" prop="share_count"/>
                <el-table-column label="操作" width="240" fixed="right">
                    <template #default="{ row }">
                        <el-link class="link mr-4" v-perms="['dynamic.dynamic/createDynamic']" type="primary" :underline="false" @click="handleEdit(row)">编辑</el-link>
                        <el-link class="link mr-4" v-perms="['dynamic.dynamic/changeOfficialDynamic']" type="danger" :underline="false" @click="handleDel(row)">删除</el-link>
                        <el-link v-if="row.status != 1" class="link" v-perms="['dynamic.dynamic/changeOfficialDynamic']" type="primary" :underline="false" @click="handleOpen(row)">启用</el-link>
                        <el-link v-if="row.status == 1" class="link" v-perms="['dynamic.dynamic/changeOfficialDynamic']" type="danger" :underline="false" @click="handleClose(row)">禁用</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-dialog
                v-model="showIcon"
                :title="formData.id? '编辑资讯': '新建资讯'"
                width="900"
                @close="handleDiaClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="180"
                require-asterisk-position="right"
            >
                <el-form-item label="标题" prop="official_title">
                    <div class="w-80">
                        <el-input
                            v-model="formData.official_title"
                            placeholder="请输入标题"
                            type="textarea"
                            autosize
                            maxlength="30"
                            show-word-limit
                            clearable
                        />
                    </div>
                </el-form-item>

                <el-form-item label="文章来源" prop="official_from">
                    <div class="w-80">
                        <el-input
                            v-model="formData.official_from"
                            placeholder="请输入文章来源"
                            type="textarea"
                            autosize
                            maxlength="30"
                            show-word-limit
                            clearable
                        />
                    </div>
                </el-form-item>

                <el-form-item label="来源头像" prop="official_header">
					<div class="w-80">
						<div>
							<material-picker v-model="formData.official_header" :limit="1"/>
						</div>
						<!-- <div class="form-tips">建议尺寸：130*130px</div> -->
					</div>
				</el-form-item>

                <el-form-item label="封面图" prop="official_pics">
					<div class="w-80">
						<div>
							<material-picker v-model="formData.official_pics" :limit="1"/>
						</div>
						<!-- <div class="form-tips">建议尺寸：130*130px</div> -->
					</div>
				</el-form-item>

                <el-form-item label="排序">
                    <div class="w-80">
                        <el-input
                            v-model="formData.sort"
                            placeholder="请输入排序"
                            type="text"
                            maxlength="100"
                            show-word-limit
                            clearable
                        />
                    </div>
                </el-form-item>

                <el-form-item label="启用状态" prop="status">
                    <div class="w-80">
                        <!-- :disabled="!route.query.id" -->
                        <el-radio-group v-model="formData.status">
                            <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
                            <!--              <el-radio value="Value 1">Option 1</el-radio>-->
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="2">禁用</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>

                <el-form-item label="资讯详情" prop="official_content">
                    <editor v-model="formData.official_content" :height="367" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                    <el-button v-perms="['dynamic.dynamic/createDynamic']" type="primary" @click="onSubmit" :loading="loading">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- <editor v-model="formData.official_content" :height="367" /> -->
    </div>
</template>
<script lang="ts" setup name="headIcon">
import { usePaging } from '@/hooks/usePaging';
import { officialList, updateStatus, createDynamic, changeOfficialDynamic } from '@/api/resource';
import { infos } from '@/api/safe';
import type {FormInstance} from 'element-plus';
import feedback from '@/utils/feedback'
const queryParams:any = reactive({
		
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: officialList,
    params: queryParams
})
const formRef = shallowRef<FormInstance>()
const showIcon = ref(false);
const formData:any = reactive({
    id: '',
    official_title: '',
    official_pics: '',
    official_from: '',
    official_content: '',
    official_header: '',
    sort: 0,
    status: 1
})
const rules = reactive({
    official_title: [{required: true, message: '请输入标题', trigger: 'blur'}],
    official_from: [{required: true, message: '请输入文章来源', trigger: 'blur'}],
    official_header: [{required: true, message: '请选择来源头像', trigger: 'blur'}],
    official_pics: [{required: true, message: '请选择封面图', trigger: 'blur'}],
    official_content: [{required: true, message: '请输入资讯详情', trigger: 'blur'}],
})
const handleDiaClose = () => {
    console.log('===')
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
        formRef.value?.resetFields();
    },30);
}

const onCancel = () => {
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
        formRef.value?.resetFields();
    },30);
    showIcon.value = false
}
const loading = ref(false)
const onSubmit = async() => {
    try{
        await formRef.value?.validate()
        console.log(formData)
        if (formData.official_content == "<p><br></p>") {
            feedback.msgError('请填写资讯详情')
            return false;
        }
        loading.value = true;
        await createDynamic(formData)
        showIcon.value = false;
        getLists()
    }catch(error){
        console.log(error)
    }
}
const onClick_add = () => {
    formData.id = '';
    formData.official_title = '';
    formData.official_pics = '';
    formData.official_from = '';
    formData.official_content = '';
    formData.official_header = '';
    formData.sort = 0;
    formData.status = 1;
    loading.value = false;
    showIcon.value = true;
}

const handleEdit = async (row:any) => {
    const res = await infos({id: row.id});
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = res[key]
    })
    loading.value = false;
    showIcon.value = true;
}
const handleDel = async (row:any) => {
    console.log(row)
    try{
        await feedback.confirm('是否确认将该信息删除，删除后，该信息将从列表中消失，app中也不会再进行显示')
        await changeOfficialDynamic({
            id: row.id,
            status: 4
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}

const handleOpen = async (row:any) => {
    try{
        await feedback.confirm('是否确认将该信息启用，启用后app将会显示该信息')
        await changeOfficialDynamic({
            id: row.id,
            status: 1
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}
const handleClose = async (row:any) => {
    try{
        await feedback.confirm('是否确认将该信息禁用，禁用后app将不会显示该信息')
        await changeOfficialDynamic({
            id: row.id,
            status: 3
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}

onMounted(async () => {
    getLists();
});
</script>